<dashboard-app class="app-container dashboard-container">
  <!-- Local nav. -->
  <kbn-top-nav name="dashboard" config="topNavMenu">
    <!-- Transcluded elements. -->
    <div data-transclude-slots>
      <!-- Title. -->
      <div
        data-transclude-slot="topLeftCorner"
      >
        <div class="kuiLocalBreadcrumbs" data-test-subj="breadcrumbs">
          <div class="kuiLocalBreadcrumb">
            <a class="kuiLocalBreadcrumb__link" href="{{landingPageUrl()}}">Dashboard</a>
          </div>
          <div class="kuiLocalBreadcrumb">
            {{ getDashTitle() }}
          </div>
        </div>
      </div>

      <!-- Search. -->
      <form
        data-transclude-slot="bottomRow"
        class="fullWidth"
        ng-show="chrome.getVisible()"
        role="form"
        name="queryInput"
        ng-submit="filterResults()"
      >
        <div class="typeahead" kbn-typeahead="dashboard">
          <div class="kuiLocalSearch">
            <input
              parse-query
              input-focus
              kbn-typeahead-input
              ng-model="model.query"
              placeholder="Filter..."
              aria-label="Filter input"
              data-test-subj="dashboardQuery"
              type="text"
              class="kuiLocalSearchInput"
              ng-class="{'kuiLocalSearchInput-isInvalid': queryInput.$invalid}"
            >
            <button
              type="submit"
              aria-label="Filter Dashboards"
              class="kuiLocalSearchButton"
              data-test-subj="dashboardQueryFilterButton"
              ng-disabled="queryInput.$invalid"
            >
              <span class="fa fa-search" aria-hidden="true"></span>
            </button>
          </div>
          <kbn-typeahead-items></kbn-typeahead-items>
        </div>
      </form>
    </div>
  </kbn-top-nav>

  <!-- Filters. -->
  <filter-bar state="state"></filter-bar>

  <div ng-show="getShouldShowEditHelp()" class="text-center start-screen">
    <h2>This dashboard is empty. Let's fill it up!</h2>
    <p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="kbnTopNav.open('add'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization">Add</a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't setup a visualization yet visit <a href="#/visualize" title="Visualize">"Visualize"</a> to create your first visualization.</p>
  </div>

  <div ng-show="getShouldShowViewHelp()" class="text-center start-screen">
    <h2>This dashboard is empty. Let's fill it up!</h2>
    <p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="kbnTopNav.click('edit');" aria-label="Edit">Edit</a> button in the menu bar above to start working on your new dashboard.
  </div>

  <dashboard-grid
    ng-show="!hasExpandedPanel()"
    on-panel-removed="onPanelRemoved"
    dashboard-view-mode="dashboardViewMode"
    panels="panels"
    get-vis-click-handler="getFilterBarClickHandler"
    get-vis-brush-handler="getBrushEvent"
    save-state="saveState"
    toggle-expand="toggleExpandPanel"
    create-child-ui-state="createChildUiState"
    toggle-expand="toggleExpandPanel"
    data-shared-items-count="{{panels.length}}"
  ></dashboard-grid>

  <dashboard-panel ng-if="hasExpandedPanel()"
                   panel="expandedPanel"
                   is-full-screen-mode="!chrome.getVisible()"
                   is-expanded="true"
                   dashboard-view-mode="dashboardViewMode"
                   get-vis-click-handler="getFilterBarClickHandler"
                   get-vis-brush-handler="getBrushEvent"
                   save-state="saveState"
                   create-child-ui-state="createChildUiState"
                   toggle-expand="toggleExpandPanel(expandedPanel.panelIndex)">
  </dashboard-panel>

</dashboard-app>
